<!--
 * @Author: Rain
 * @Date: 2021-11-21 13:35:48
 * @LastEditTime: 2024/01/15 11:59:15
 * @Description: Do Something
-->
<template>
  <div class="app-container w-full h-full overflow-hidden">
    <!--工具栏-->
    <div class="head-container w-full h-full overflow-hidden flex flex-col">
      <div class="flex flex-end items-center w-full search pb-10">
        <!-- 搜索 -->
        <!-- <label class="el-form-item-label">名称</label> -->
        <el-input
          v-model="query.name"
          class="filter-item"
          clearable
          placeholder="名称"
          style="width: 185px"
          @keyup.enter.native="crud.toQuery"
        />
        <el-select
          v-model="query.type"
          filterable
          placeholder="请选择"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in dict.advert_type"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="query.status"
          filterable
          placeholder="请选择"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in dict.advert_status"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <rrOperation :crud="crud" />
        <crudOperation :permission="permission" />
      </div>
      <div class="w-full flex-1 overflow-hidden">
        <el-table
          ref="table"
          v-loading="crud.loading"
          :data="crud.data"
          height="100%"
          size="small"
          style="width: 100%"
          @selection-change="crud.selectionChangeHandler"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            label="名称"
            prop="name"
          />
          <el-table-column
            label="外链"
            prop="url"
          />
          <el-table-column
            label="内容"
            prop="content"
          >
            <template slot-scope="{ row }">
              <img
                :src="row.content | imgTransform"
                alt="图片"
                style="width: 100px; height: 100px"
              >
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            prop="status"
          >
            <template slot-scope="scope">{{ dict.label.advert_status[scope.row.status] }}</template>
          </el-table-column>
          <el-table-column
            label="类型"
            prop="type"
          >
            <template slot-scope="scope">{{ dict.label.advert_type[scope.row.type] }}</template>
          </el-table-column>
          <el-table-column
            v-if="checkPer(['admin', 'advert:edit', 'advert:del'])"
            align="center"
            label="操作"
            width="150px"
          >
            <template slot-scope="scope">
              <udOperation
                :data="scope.row"
                :permission="permission"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination />
    </div>
    <el-dialog
      :before-close="crud.cancelCU"
      :close-on-click-modal="false"
      :title="crud.status.title"
      :visible.sync="crud.status.cu > 0"
      width="500px"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
        size="small"
      >
        <el-form-item label="名称">
          <el-input
            v-model="form.name"
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item label="外链">
          <el-input
            v-model="form.url"
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item
          v-if="0"
          label="内容"
        >
          <el-input
            v-model="form.content"
            style="width: 370px"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="form.status"
            class="w-full"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in dict.advert_status"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="form.type"
            class="w-full"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in dict.advert_type"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="内容">
          <el-upload
            :auto-upload="false"
            :limit="1"
            :on-change="uploadFile"
            :on-remove="removeFile"
            accept=".jpg, .png"
            action="/api/localStorage/pictures"
          >
            <div class="flex items-center">
              <el-button
                size="small"
                type="primary"
              >点击上传</el-button>
              <div
                slot="tip"
                class="el-upload__tip"
                style="margin-left: 10px"
              >只能上传jpg/png文件</div>
            </div>
          </el-upload>
          <img
            v-if="form.content"
            :src="form.content"
            alt="图片"
            style="width: 300px; height: 300px"
          >
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="danger"
          @click="crud.cancelCU"
        >取消</el-button>
        <el-button
          :loading="crud.status.cu === 2"
          type="primary"
          @click="submitAction"
        >确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import crudAdvert from '@/api/advert'
import CRUD, { crud, form, header, presenter } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import rrOperation from '@crud/RR.operation'
import udOperation from '@crud/UD.operation'

const defaultForm = {
  id: null,
  name: null,
  content: null,
  status: null,
  type: null,
  url: null
}
export default {
  name: 'Advert',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['advert_status', 'advert_type'],
  cruds() {
    return CRUD({
      title: '广告管理',
      url: 'api/advert',
      idField: 'id',
      sort: 'id,desc',
      crudMethod: { ...crudAdvert }
    })
  },
  data() {
    return {
      permission: {
        add: ['admin', 'advert:add'],
        edit: ['admin', 'advert:edit'],
        del: ['admin', 'advert:del']
      },
      rules: {},
      queryTypeOptions: [
        { key: 'name', display_name: '名称' },
        { key: 'status', display_name: '状态' },
        { key: 'type', display_name: '类型' }
      ],
      file: null
    }
  },
  methods: {
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    submitAction() {
      if (this.file) {
        const formData = new FormData()
        formData.append('file', this.file)
        return this.$http.post('/api/localStorage/pictures', formData).then((_) => {
          const { path } = _
          this.form.content = path.replace('/home/eladmin/', '/')
          this.$http.post('/api/advert', this.form).then(() => {
            this.crud.status.cu = 0
            this.crud.cancelCU()
            this.crud.toQuery()
          })
        })
      } else {
        this.$http.post('/api/advert', this.form).then(() => {
          this.crud.status.cu = 0
          this.crud.cancelCU()
          this.crud.toQuery()
        })
      }
    },
    uploadFile(e) {
      const { raw } = e
      this.file = raw
      this.form.content = window.URL.createObjectURL(raw)
    },
    removeFile() {
      this.file = null
      this.form.content = ''
    }
  }
}
</script>

<style scoped></style>
